<!--
 * @Description: App
 * @Author: rendc
 * @Date: 2023-02-24 09:18:02
 * @LastEditors: Its_T 1412467548@qq.com
 * @LastEditTime: 2023-03-02 11:00:33
-->
<script setup>
import {ref} from "vue";
let dataf = [
  {text:"苏宁家电",icon:"https://image3.suning.cn/uimg/cms/img/165710989476671143.png?from=mobile",},
  {text:"苏宁超市",icon:"https://image1.suning.cn/uimg/cms/img/161293951076282456.png?from=mobile",},
  {text:"手机数码",icon:"https://image1.suning.cn/uimg/cms/img/161293957567317395.png?from=mobile",},
  {text:"家具家装",icon:"https://image1.suning.cn/uimg/cms/img/161293957567317395.png?from=mobile",},
  {text:"生活家电",icon:"	https://image2.suning.cn/uimg/cms/img/165717927411065855.png?from=mobile",},
];
let datas = [
  {text:"服饰百货",icon:"https://image1.suning.cn/uimg/cms/img/165717934177245432.png?from=mobile"},
  {text:"场景购",icon:"https://image1.suning.cn/uimg/cms/img/167721730161114108.png?from=mobile"},
  {text:"签到有礼",icon:"https://image3.suning.cn/uimg/cms/img/161293963977525820.png?from=mobile"},
  {text:"领券中心",icon:"https://image1.suning.cn/uimg/cms/img/161293965567020138.png?from=mobile"},
  {text:"更多频道",icon:"https://image3.suning.cn/uimg/cms/img/161293968063152286.png?from=mobile"},
];
let fdata = [
  {src:"https://image2.suning.cn/uimg/cms/img/167756436589516141.jpg?format=is",},
  {src:"https://oss.suning.com/adpp/creative_kit/material/picture/20230214-77549ac515af48fbb106fbaae63419d476b3b9531bc249f2.png",},
  {src:"https://oss.suning.com/adpp/creative_kit/material/picture/20230214-6426399619e247b1be8600550dc8105aa380d0ad17214ffe.jpg",},
  {src:"https://image2.suning.cn/uimg/cms/img/167715391167764897.jpg",},
];
const active = ref(0);
</script>

<template>
<div v-if="active == 0">
  <div class="body">
    <!-- 头部 -->
    <div class="head">
      <!-- <van-image
      src="	https://image1.suning.cn/uimg/cms/img/167756476957670777.png"
      /> -->
      <div class="top">
        <div class="left">
          <van-image
          src="https://image2.suning.cn/uimg/cms/img/157199320847433454.png"
          />
        </div>
        <div class="mid">
          <van-image
          src="https://image2.suning.cn/uimg/cms/img/167756475395113867.gif"
          />
        </div>
        <div class="right">
          <van-image
          src="https://image1.suning.cn/uimg/cms/img/157199321817918653.png"
          />
        </div>
      </div>
      <div class="buttom">
        <van-search
          v-model="value"
          shape="round"
          background="#ffffff00"
          placeholder="请输入搜索关键词"
        />
      </div>
    </div>
      <!-- 小宫格 -->
      <div class="list">
        <div class="firstf">
          <van-grid :border="false" :column-num="5" icon-size="43" >
            <van-grid-item 
              v-for="i in dataf"
              :icon="i.icon"
              :text="i.text"
            />
          </van-grid>
        </div>
        <div class="secondf">
          <van-grid :border="false" :column-num="5" icon-size="43" >
            <van-grid-item 
            v-for="i in datas"
            :icon="i.icon"
            :text="i.text"
            />
          </van-grid>
        </div>
      </div>

      <!-- 第三层 -->
      <div class="thirdf"> 
        <div class="fp">
          <van-image
            src="https://image1.suning.cn/uimg/cms/img/167766029100853748.gif"
          />
        </div>
        <div class="sp"></div>
        <div class="tp">
          <van-image
            src="	https://image2.suning.cn/uimg/cms/img/167756484719002878.gif"
          />
        </div>
      </div>

      <!-- 空白区 -->
      <!-- <div class="blank"></div> -->
      <!-- 第四层 -->
      <div class="forthf">
        <div>
          <van-image
            src="https://image2.suning.cn/uimg/cms/img/166519823350409910.png"
          />
        </div>
        <div class="inner_l">
          <van-image
            width="78.84px"
            src="https://image2.suning.cn/uimg/cms/img/166519830495916803.jpg"
          />
          <div class="ltext">
            <p>￥5999</p>
          </div>
        </div>
        <div class="inner_r">
          <van-image
            width="78.84px"
            src="https://image2.suning.cn/uimg/cms/img/166519837827005655.jpg"
          />
          <div class="rtext">
            <p>￥22</p>
          </div>
        </div>
      </div>
      <div class="forthf">
        <div>
          <van-image
            src="	https://image2.suning.cn/uimg/cms/img/167566432517581205.png"
          />
        </div>
        <div class="inner_l">
          <van-image
            width="78.84px"
            src="https://image2.suning.cn/uimg/cms/img/167566437965466151.png"
          />
          <div class="ntext">
            <p>热销榜</p>
          </div>
        </div>
        <div class="inner_r">
          <van-image
            width="78.84px"
            src="	https://image2.suning.cn/uimg/cms/img/167566438802647284.jpg"
          />
          <div class="ntext">
            <p>热销榜</p>
          </div>
        </div>
      </div>
      <div class="forthf">
        <div>
          <van-image
            src="	https://image2.suning.cn/uimg/cms/img/167566432517581205.png"
          />
        </div>
        <div class="inner_l">
          <van-image
            width="78.84px"
            src="https://image3.suning.cn/uimg/cms/img/167566463839850215.png"
          />
          <div class="tltext">
            <p>iPhone14</p>
          </div>
        </div>
        <div class="inner_r">
          <van-image
            width="78.84px"
            src="https://image2.suning.cn/uimg/cms/img/167566474043702723.gif"
          />
          <div class="trtext">
            <p>月度礼包</p>
          </div>
        </div>
      </div>
      <div class="forthf">
        <div>
          <van-image
            src="	https://image2.suning.cn/uimg/cms/img/167566432517581205.png"
          />
        </div>
        <div class="inner_l">
          <van-image
            width="78.84px"
            src="	https://image2.suning.cn/uimg/cms/img/167566490288432368.png"
          />
          <div class="fltext">
            <p>直播专属价</p>
          </div>
        </div>
        <div class="inner_r">
          <van-image
            width="78.84px"
            src="https://image2.suning.cn/uimg/cms/img/167566509744278273.gif"
          />
          <div class="frtext">
            <p>抽好礼</p>
          </div>
        </div>
      </div>

      <!-- 第五层 -->
      <div class="flcon">
        <div class="finner">
          <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" >
            <van-swipe-item v-for="i in fdata" @click="swipeClick">
              <van-image
                width="100%"
                height="225px"
                :src="i.src"
              />
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
      <div class="frcon">
        <div class="frinner">
          <!-- <van-image
            src="https://image2.suning.cn/uimg/cms/img/167694210260833165.png"
          /> -->
          <div class="ftitle">
            <span>手机电脑</span>
          </div>
          <div class="ftitle">
            <span>母婴热卖</span>
          </div>
          <div class="frinner_l">
            <van-image
              width="61.44px"
              src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/09/14/16/659dd09854a6481484d5ea2b4fb4f510.png?format=_is_200w_200h_4e"
            />
            <div class="frinner_l_t">
              <p>枪1000券</p>
            </div>
          </div>
          <div class="frinner_r">
            <van-image
              width="61.44px"
              src="https://imgservice.suning.cn/uimg1/sniss/improve/JavsJW_bPgRxJh6e7v6TLg.jpg?format=_is_200w_200h_4e"
            />
            <div class="frinner_l_t">
              <p>枪99减50券</p>
            </div>
          </div>
        </div>
        <div class="frinner">
          <!-- <van-image
            src="https://image2.suning.cn/uimg/cms/img/167694210260833165.png"
          /> -->
          <div class="ftitle">
            <span>手机电脑</span>
          </div>
          <div class="ftitle">
            <span>母婴热卖</span>
          </div>
          <div class="frinner_l">
            <van-image
              width="61.44px"
              src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/03/29/20/5376e5be168a48f39a1598f711490031.png?format=_is_200w_200h_4e"
            />
            <div class="frinner_l_t">
              <p>享12期免息</p>
            </div>
          </div>
          <div class="frinner_r">
            <van-image
              width="61.44px"
              src="https://imgservice.suning.cn/uimg1/pcpv/pcpv/whitePic/2022/05/31/20/c5c8934b15b64420bc5d6c3d04b80441.png?format=_is_200w_200h_4e"
            />
            <div class="frinner_l_t">
              <p>24期免息</p>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 敬请期待 -->
      <div class="nomore">
        <p>----敬请期待----</p>
      </div>
  </div>
</div>
<div v-if="active == 1">></div>
<div v-if="active == 2">></div>
<div v-if="active == 3">></div>
<div v-if="active == 4">></div>



<van-tabbar v-model="active">
  <van-tabbar-item icon="home-o">
    <span>猜你喜欢</span>
    <template #icon="props">
      <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
      <div class="iconImg" :class="props.active ? 'homeActive' : 'homeInactive'"></div>
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="home-o">
    <span>分类</span>
    <template #icon="props">
      <!-- <img :src="props.active ? icon.active : icon.inactive" /> -->
      <div class="iconImg" :class="props.active ? 'sortActive' : 'sortInactive'"></div>
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="search">
    <span>排行榜</span>
    <template #icon="props">
      <div class="iconImg" :class="props.active ? 'rangeActive' : 'rangeInactive'"></div>
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="friends-o">
    <span>购物车</span>
    <template #icon="props">
      <div class="iconImg" :class="props.active ? 'shoppingActive' : 'shoppingInactive'"></div>
    </template>
  </van-tabbar-item>
  <van-tabbar-item icon="setting-o">
    <span>我的易购</span>
    <template #icon="props">
      <div class="iconImg" :class="props.active ? 'mineActive' : 'mineInactive'"></div>
    </template>
  </van-tabbar-item>
</van-tabbar>
</template>

<style lang="less" scoped>
.body {
  width: 100%;
  height: 1000px;
  background-color: rgb(247, 247, 247);
}
  .head {
  margin-left: 3px;
  width: 384px;
  height: 92px;
  background-image: url(assets/1.png);
    .top{
      height: 40px;
      .left {
        float: left;
        margin-left: 17px;
        margin-top: 10px;
        width: 18.5px;
        height: 30.5px;
      }
      .mid {
        margin-left: 55px;
        float: left;
        width: 200px;
        height: 39px;
      }
      .right {
        float: right;
        width: 18.5px;
        height: 30.5px;
        margin-top: 10px;
        margin-right: 17px;
      }
    }
    .buttom {
      widows: 100%;
      height: 54px;
    }
    
}
:deep(.van-search) {
  width: 380px !important;
  margin-top: -10px;
}
.list {
  // margin-top: 4px;
  width: 384px;
  height: 164px;
  background-image: url(assets/1.jpg);
  margin-left: 3px;
  .firstf {
  }
  .secondf {
    margin-top: -30px;
  }
}
:deep(.van-grid-item__content) {
  background: #ffffff00;
}
.thirdf {
  margin-left: 3px;
  margin-top: -1px;
  .fp {
    width: 128px;
    height: 112.84px;
    // background-image: url(assets/2_1.png);
    float: left;
  }
  .sp {
    width: 130px;
    height: 112.84px;
    background-image: url(assets/2_2.jpg);
    float: left;
    margin-left: -1px;
  }
  .tp {
    width: 128px;
    height: 112.84px;
    // background-image: url(assets/2_3.jpg);
    margin-left: -1px;
    float: left;  
  }
}
// .blank {
//   margin-top: 112.83px;
//   width: 100%;
//   height: 12.28px;
//   background-color: #000000;
// }
.forthf {
  float: left;
  width: 175.09px;
  height: 107.52px;
  background-color: #ffffff;
  border-radius: 10px;
  margin-left: 14px;
  margin-top: 12.28px;
  .inner_l {
    position: absolute;
    float: left;
    margin-top: -85px;
    margin-left: 5px;
  }
  .inner_r {
    float: right;
    margin-top: -85px;
    margin-right: 5px;
  }
  .ltext {
    position: relative;
    margin-left: 15px;
    margin-top: -35px;
    border-radius: 20px;
    width: 47.69px;
    height: 14.33px;
    color: #ff0000;
    font: 12px Arial, Helvetica, STHeiTi, sans-serif;
    background-color: #ffebeb;
  }
  .rtext {
    position: relative;
    margin-left: 22px;
    margin-top: -35px;
    border-radius: 20px;
    width: 34.34px;
    height: 14.33px;
    color: #ff0000;
    font: 12px Arial, Helvetica, STHeiTi, sans-serif;
    background-color: #ffebeb;
  }
}
.ntext {
   margin-left: 13px;
   margin-top: -35px;
    position: relative;
    color: #b95a17;
    width: 50.31px;
    height: 14.33px;
    text-align: center;
    border-radius: 20px;
    background-color: #ffebeb;
    font: 12px Arial, Helvetica, STHeiTi, sans-serif;
}
.tltext {
   margin-left: 8px;
   margin-top: -35px;
    position: relative;
    color: #b95a17;
    width: 65.03px;
    height: 14.33px;
    text-align: center;
    border-radius: 20px;
    background-color: #ffebeb;
    font: 12px Arial, Helvetica, STHeiTi, sans-serif;
}
.trtext {
   margin-left: 8px;
   margin-top: -35px;
    position: relative;
    color: #b95a17;
    width: 62.31px;
    height: 14.33px;
    text-align: center;
    border-radius: 20px;
    background-color: #ffebeb;
    font: 12px Arial, Helvetica, STHeiTi, sans-serif;
}
.fltext {
   margin-left: 8px;
   margin-top: -35px;
    position: relative;
    color: #b95a17;
    width: 62.31px;
    height: 14.33px;
    text-align: center;
    border-radius: 20px;
    background-color: #ffebeb;
    font: 12px Arial, Helvetica, STHeiTi, sans-serif;
}
.frtext {
   margin-left: 15px;
   margin-top: -35px;
    position: relative;
    color: #b95a17;
    width: 50.31px;
    height: 14.33px;
    text-align: center;
    border-radius: 20px;
    background-color: #ffebeb;
    font: 12px Arial, Helvetica, STHeiTi, sans-serif;
}
.flcon {
  float: left;
  width: 175.09px;
  height: 274.83px;
  margin-top: -12px;
  margin-left: 14px;
  background-color: #00000000;
  .finner {
    border-radius: 10px;
    margin-top: 25px;
    width: 100%;
    height: 225px;
  }
}
.frcon {
  float: right;
  width: 175.09px;
  height: 252.83px;
  margin-top: 10px;
  margin-right: 14px;
  background-color: #00000000;
  .frinner {
    background-image: url(assets/5_4.jpg);
    width: 175px;
    height: 108px;
    border-radius: 10px;
    margin-top: 5px;
    .ftitle {
      margin-left: 5px;
      line-height: 0.96rem;
      width: 79.86px;
      height: 24.56px;
      float: left;
      color: #ffffff;
      font: 13.312px Arial, Helvetica, STHeiTi, sans-serif;
      font-weight: bold;
      text-align: center;
    }
    
  }
}
.frinner_l {
    float: left;
    margin-left: 16px;
    margin-top: 7px;
   
  }
   .frinner_l_t {
      margin-top: -25px;
      position: relative;
      color: #ffffff;
      width: 66.2px;
      height: 14.33px;
      text-align: center;
      border-radius: 20px;
      background-color: rgb(255, 75, 25);
      font: 12px Arial, Helvetica, STHeiTi, sans-serif;
    }
.frinner_r {
    float: right;
    margin-right: 10px;
    margin-top: 7px;
  }
:deep(.van-image__img, .van-image__error, .van-image__loading) {
  border-radius: 0px;
}
.nomore {
  width: 100%;
  float: left;
  color: #ff0000;
  font-weight: bold;
  text-align: center;
}
</style>
<style>
:root {
  --van-grid-item-backgroud: #000000;
}
 .my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    text-align: center;
  }
.iconImg {
  width: 24px;
  height: 24px;
  margin: 0;
  background-size: 24px !important;
}

/* 首页 */
.homeActive {
  background: url(https://image1.suning.cn/uimg/cms/img/157543975265772267.png?from=mobile);
}
.homeInactive {
  background: url(https://image.suning.cn/uimg/cms/img/157105696599538235.png);
}
/* 分类 */
.sortActive {
  background: url(	https://image.suning.cn/uimg/cms/img/157105701326237728.png);
}

.sortInactive {
  background: url(https://image1.suning.cn/uimg/cms/img/157562573743964714.png?from=mobile);
}
/* 排行榜 */
.rangeActive {
  background: url(	https://image.suning.cn/uimg/cms/img/157105715273415124.png);
  }
.rangeInactive {
  background: url(https://image1.suning.cn/uimg/cms/img/157543978244974042.png?from=mobile);
}
/* 购物车 */
.shoppingInactive {
  background: url(//image.suning.cn/uimg/cms/img/157105762930982264.png);
}

.shoppingActive {
  background: url(	https://image.suning.cn/uimg/cms/img/157105763151658248.png);
}
/* 我的 */
.mineActive {
  background: url(https://image.suning.cn/uimg/cms/img/157105768594001788.png);
}

.mineInactive {
  background: url(https://image1.suning.cn/uimg/cms/img/157543980229048220.png?from=mobile);
}

</style>
